<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>旅梦友友</title>
  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> -->
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
    }

    .container {
      max-width: 800px;
      margin: 20px auto;
      background-color: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .information {
      margin-bottom: 20px;
    }

    h1 {
      font-size: 24px;
      text-align: center;
      margin-bottom: 20px;
    }

    .table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    .table th,
    .table td {
      padding: 10px;
      text-align: center;
      border: 1px solid #dddddd;
    }

    .table th {
      background-color: #f2f2f2;
    }

    .send {
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 10px;
    }

    label {
      font-weight: bold;
    }

    #questionInput {
      width: 100%;
      padding: 10px;
      font-size: 14px;
    }

    .btn-default {
      background-color: #007bff;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
    }

    .btn-default:hover {
      background-color: #0056b3;
    }

    .answer {
      background-color: #f2f2f2;
      padding: 10px;
      height: 20px;
      display: flex;
      align-items: center;
      position: relative;
    }

    /* 仅在打字时显示光标 */
    .answer.typing::after {
      content: '|';
      display: inline-block;
      margin-left: 5px;
      animation: blink 1s step-end infinite;
    }

    @keyframes blink {
      from, to { opacity: 1; }
      50% { opacity: 0; }
    }

    /* 加载图标样式 */
    .loader {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      animation: spin 2s linear infinite;
      display: inline-block;
      margin-left: 10px;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="information">
      <h1>AI能力驱动的userData</h1>
      <table class="table table-striped" id="user_table">
        <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>家乡</th>
          </tr>
        </thead>
        <tbody>
          <!-- <tr>
            <td>1</td>
            <td>代童</td>
            <td>赣州</td>
          </tr>
          <tr>
            <td>2</td>
            <td>罗昭发</td>
            <td>赣州</td>
          </tr> -->
        </tbody>
      </table>

      <div class="send">
        <form name="aiForm" method="get" action="http://www.baidu.com">
          <div class="form-group">
            <label for="questionInput">向AI助理提问</label>
            <input type="text" name="question" class="form-control" id="questionInput" placeholder="请输入你想问的users相关问题">
          </div>
          <button type="submit" class="btn btn-default">提交</button>
        </form>
      </div>

      <div class="answer" id="message">
        <div class="loader" id="loader" style="display: none;"></div>
        <div id="text"></div>
      </div>
    </div>
  </div>



  <script>

    const oBody = document.querySelector("#user_table tbody");

    let usersData = [];
    console.log(oBody);

    fetch('http://localhost:3000/users')
      .then(data => data.json())
      .then(users => {
        usersData = users;
        console.log(usersData);
        // console.log(users);
        oBody.innerHTML = users.map(user => `
          <tr>
            <td>${user.id}</td>
            <td>${user.name}</td>
            <td>${user.hometown}</td>
          </tr>
        `).join("");
      })


    const oMessage = document.querySelector("#message");
    const oForm = document.forms['aiForm'];
    const loader = document.getElementById('loader'); // 获取加载图标元素
    const textElement = document.getElementById('text'); // 获取文本元素
    oForm.addEventListener('submit', function (event) {
      event.preventDefault();
      const question = this["question"].value.trim();
      textElement.innerHTML='';
      // 显示加载图标
      loader.style.display = 'inline-block';
      // 隐藏答案区域
      // oMessage.style.display = 'none';
      if (question) {
        fetch(`http://localhost:8888/users?question=${encodeURIComponent(question)}&users=${encodeURIComponent(JSON.stringify(usersData))}`)
          .then(data => data.json())
          .then(res => {
            // 隐藏加载图标
            loader.style.display = 'none';
            
            if (res.message && res.message.trim() !== "") {
              // 显示答案区域
              // oMessage.style.display = 'block';
              // 添加typing类以显示光标
              oMessage.classList.add('typing');
              // document.getElementById('text').innerHTML = ''; // 清空之前的答案
              // 使用打字机效果显示答案
              typeWriter(res.message);
            } else {
              // 无内容时，不做处理，加载图标已隐藏
            }
          })
          .catch(err => {
            // 隐藏加载图标
            loader.style.display = 'none';
            // 显示错误信息
            oMessage.innerHTML = '发生错误，请重试。';
            oMessage.style.display = 'block';
            console.error(err);
          });
      }
    })

    // 打字机效果函数
    function typeWriter(text, i = 0) {
      const textElement = document.getElementById('text'); // 获取文本元素
      textElement.innerHTML += text.charAt(i);
      setTimeout(() => typeWriter(text, i + 1), 50);
      if (i === text.length) {
        oMessage.classList.remove('typing'); // 完成打字后移除typing类
      }
    }
  </script>
</body>

</html>